<template>
  <div class="app-container">
    <!-- tab -->
    <div class="grouping cardBox">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="16">
            <div class="left-panel">
              <el-button
                icon="el-icon-circle-plus-outline"
                type="primary"
                size="small"
                @click="addlevel"
                >添加规格</el-button
              >
            </div>
          </el-col>
          <el-col :xs="24" :sm="8">
            <div class="right-panel el-button-group">
              <el-button
                class=""
                icon="el-icon-refresh"
                size="mini"
                @click="refresh"
              ></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button
                    class=""
                    icon="el-icon-s-operation"
                    size="mini"
                  ></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
          <!-- <el-col>
            <el-button type="primary" size="small" @click="addlevel">添加等级</el-button>
          </el-col> -->
        </el-row>
      </div>
      <!-- 规格列表 -->
      <el-row :gutter="20">
        <el-col>
          <el-table
            v-loading="loading"
            highlight-current-row
            :data="tableData"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
          >
            <el-table-column prop="id" label="规格ID" align="center">
            </el-table-column>
            <el-table-column prop="goods_id" label="商品ID" align="center">
            </el-table-column>
            <el-table-column prop="sku_name" label="规格名称" align="center">
            </el-table-column>
            <el-table-column prop="sku_img" label="规格图片" align="center">
              <template slot-scope="scope">
                <div style="width: 50px; height: 50px; margin: 0 auto">
                  <el-image
                    style="width: 50px; height: 50px"
                    v-if="scope.row.sku_img"
                    :src="scope.row.sku_img"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="retail_price" label="零售价" align="center">
            </el-table-column>
            <el-table-column prop="cost_price" label="成本价" align="center">
            </el-table-column>
            <el-table-column prop="inventory" label="库存" align="center">
            </el-table-column>
            <el-table-column
              prop="Inventory_alert"
              label="库存预警"
              align="center"
            >
              <el-switch
                v-model="forms.inventory_alert"
                active-color="#2d8cf0"
                inactive-color="#ccc"
                active-value="1"
                inactive-value="0"
                disabled
              >
              </el-switch>
            </el-table-column>
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row[fruit] }}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              width="180"
              prop="address"
              label="操作"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="editlevel(scope.row)"
                >
                  编辑
                </el-button>
                <!-- <el-button type="text" size="small">
                  删除
                </el-button> -->
              </template>
            </el-table-column>
          </el-table></el-col
        >
      </el-row>
    </div>
    <el-dialog title="添加" :visible.sync="dialogVisible" width="800px">
      <el-form ref="forms" :rules="ruless" :model="forms" label-width="120px">
        <el-form-item label="规格名称：" prop="sku_name">
          <el-input
            v-model="forms.sku_name"
            placeholder="请输入规格名称"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="零售价：" prop="retail_price">
          <el-input
            v-model="forms.retail_price"
            placeholder="请输入商品零售价"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="成本价：" prop="cost_price">
          <el-input
            v-model="forms.cost_price"
            placeholder="请输入商品成本价"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="库存：" prop="inventory">
          <el-input
            v-model="forms.inventory"
            placeholder="请输入商品库存"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品码：" prop="code">
          <el-input
            v-model="forms.code"
            placeholder="请输入商品产品码"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="库存预警：" prop="inventory_alert">
          <el-switch
            v-model="forms.inventory_alert"
            active-color="#2d8cf0"
            inactive-color="#ccc"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="单位：" prop="unit">
          <el-select
            @change="changesku"
            v-model="form.unit"
            placeholder="请选择"
            style="width: 510px"
          >
            <el-option
              v-for="item in skulist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片：" prop="sku_img">
          <logo-upload
            :single-file="forms.sku_imgs"
            :show-file-list="false"
            accept="image/jpeg, image/png"
            @uploadCallback="skuCallback"
            style="width: 90px; height: 90px"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="comitadd('forms')">保 存</el-button>
      </span>
    </el-dialog>
    <!--  -->
    <el-dialog title="编辑" :visible.sync="editdialogVisible" width="800px">
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="规格名称：" prop="sku_name">
          <el-input
            v-model="form.sku_name"
            placeholder="请输入规格名称"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="零售价：" prop="retail_price">
          <el-input
            v-model="form.retail_price"
            placeholder="请输入商品零售价"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="成本价：" prop="cost_price">
          <el-input
            v-model="form.cost_price"
            placeholder="请输入商品成本价"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="库存：" prop="inventory">
          <el-input
            v-model="form.inventory"
            placeholder="请输入商品库存"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品码：" prop="code">
          <el-input
            v-model="form.code"
            placeholder="请输入商品产品码"
            style="width: 510px"
          ></el-input>
        </el-form-item>
        <el-form-item label="库存预警：" prop="inventory_alert">
          <el-switch
            v-model="form.inventory_alert"
            active-color="#2d8cf0"
            inactive-color="#ccc"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="单位：" prop="unit">
          <el-select
            @change="changesku"
            v-model="form.unit"
            placeholder="请选择"
            style="width: 510px"
          >
            <el-option
              v-for="item in skulist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片：" prop="sku_img">
          <logo-upload
            :single-file="sku_imgs"
            :show-file-list="false"
            accept="image/jpeg, image/png"
            @uploadCallback="skuCallback"
            style="width: 90px; height: 90px"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="comitedit('form')">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGoodsProductList,
  SaveGoodsProduct,
  getLabelList,
} from "@/api/supplier/index";
import LogoUpload from "@/components/FileUpload";

const tableTheadOption = {
  created_at: {
    label: "创建时间",
    field: "created_at",
  },
  updated_at: {
    label: "更新时间",
    field: "updated_at",
  },
  code: {
    label: "产品码",
    field: "code",
  },
  unit: {
    label: "单位",
    field: "unit",
  },
};

const allTableThead = ["created_at", "updated_at", "code", "unit"];
const defaultTableThead = [];
export default {
  name: "specifications",
  components: { LogoUpload },
  data() {
    return {
      rules: {
        sku_name: [
          { required: true, message: "请输入规格名称", trigger: "blur" },
        ],
        retail_price: [
          { required: true, message: "请输入零售价", trigger: "blur" },
        ],
        cost_price: [
          { required: true, message: "请输入成本价", trigger: "blur" },
        ],
        inventory: [{ required: true, message: "请输入库存", trigger: "blur" }],
        code: [{ required: true, message: "请输入产品码", trigger: "blur" }],
        unit: [{ required: true, message: "请选择单位", trigger: "change" }],
        sku_img: [{ required: true, message: "请上传图片", trigger: "change" }],
      }, //表单验证
      ruless: {
        sku_name: [
          { required: true, message: "请输入规格名称", trigger: "blur" },
        ],
        retail_price: [
          { required: true, message: "请输入零售价", trigger: "blur" },
        ],
        cost_price: [
          { required: true, message: "请输入成本价", trigger: "blur" },
        ],
        inventory: [{ required: true, message: "请输入库存", trigger: "blur" }],
        code: [{ required: true, message: "请输入产品码", trigger: "blur" }],
        unit: [{ required: true, message: "请选择单位", trigger: "change" }],
        sku_img: [{ required: true, message: "请上传图片", trigger: "change" }],
      }, //表单验证
      dialogVisible: false, //编辑弹窗
      editdialogVisible: false,
      form: {
        name: "",
        level: "",
      },
      forms: {
        id: "",
        goods_id: 1,
        sku_name: "", //规格名称
        retail_price: "", //零售价
        cost_price: "", //成本价
        inventory: "", //库存
        code: "", //产品码
        inventory_alert: "1", //库存预警
        unit: "", //单位
        sku_img: "", //规格图片
      },
      form: {
        id: "",
        goods_id: 1,
        sku_name: "", //规格名称
        retail_price: "", //零售价
        cost_price: "", //成本价
        inventory: "", //库存
        code: "", //产品码
        inventory_alert: "", //库存预警
        unit: "", //单位
        sku_img: "", //规格图片
      },
      sku_imgs: {},
      skulist: [],
      currentPage4: 1, //页码
      tableData: [],
      loading: true, //刷新
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
    };
  },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1; // 为了保证table 每次都会重渲
    },
  },
  mounted() {
    const id = this.$route.query.id;
    this.getlevedlist(id);
    this.SupplierskuLists();
  },
  methods: {
    //切换规格单元
    changesku(val) {
      this.forms.unit = val;
    },
    // 规格上传回调
    skuCallback(singleFile) {
      this.sku_imgs = singleFile;
      this.forms.sku_img = singleFile.url;
    },
    //sku列表
    SupplierskuLists() {
      getLabelList().then((res) => {
        this.skulist = res.data;
      });
    },
    // 刷新
    refresh() {
      // this.loading = true
      this.getlevedlist();
    },
    //规格列表
    getlevedlist(id) {
      this.loading = true;
      let param = {
        GoodsId: id,
      };
      getGoodsProductList(param).then((res) => {
        this.tableData = res.data;
        this.loading = false;
      });
    },
    comitadd(formName) {
      //确认提交表单
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //请求接口
          SaveGoodsProduct(this.forms).then((res) => {
            this.dialogVisible = false;
            this.$messages.success("添加成功");
            this.getlevedlist();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    comitedit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //请求接口
          SaveGoodsProduct(this.form).then((res) => {
            this.editdialogVisible = false;
            this.$messages.success("编辑成功");

            this.getlevedlist();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //添加
    addlevel() {
      this.dialogVisible = true;
    },
    //编辑
    editlevel(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.form.inventory_alert = String(this.form.inventory_alert);
      let obj = {
        url: JSON.parse(JSON.stringify(row)).sku_img,
      };
      console.log(obj);
      this.sku_imgs = obj;
      this.editdialogVisible = true;
    },
    //页码
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //点击搜索
    search() {
      console.log(this.query, "搜索的数据");
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.order_center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 0;
  font-size: 13px;
  color: #666;
}
</style>
